<script setup lang="tsx">
import { systemName } from '@/config/modules/common.ts'
import { type MenuProps, message } from 'ant-design-vue'
import { ref, computed, onMounted, h } from 'vue'
import { headHeight } from '@/config/modules/styles.ts'
import { useRouter } from 'vue-router'
import { LogoutOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { userLogoutUsingPost } from '@/servers/api/userController.ts'
import staticRoutes from '@/access/staticRoutes.ts'
import { checkAccess } from '@/utils/index.ts'

defineOptions({
  name: 'HeadLayout'
})

const router = useRouter()
// 用户仓库
const loginUserStore = useLoginUserStore()
const menus = ref<MenuProps['items']>([])
const current = ref<string[]>([''])
// 用户信息
const userInfo = computed(() => {
  return loginUserStore.loginUser
})

// 递归处理子路由
const getChildrenMenus = (children: any) => {
  if (children && children.length > 0) {
    for (let child of children) {
      // 是否显示菜单
      const showMenu = child?.meta?.showMenu
      // 判断权限
      const access = child?.meta?.access
      // 如果显示菜单 && 权限校验通过
      let flag = checkAccess(userInfo.value, access)
      if (flag && showMenu) {
        menus.value.push({
          key: child.path,
          icon: () => h(child.meta?.icon),
          label: child.meta?.title,
          title: child.meta?.title
        })
      }
      getChildrenMenus(child.children)
    }
  }
}

// 跳转首页
const goHome = () => {
  router.push('/home')
}

// 跳转关于我们
const menuItemClick = ({ key }) => {
  router.push(key)
}

// 登录按钮点击事件
const loginClick = () => {
  router.push('/login')
}

// 用户注销
const doLogout = async () => {
  const res = await userLogoutUsingPost()
  console.log(res)
  if (res.code === 200) {
    loginUserStore.setLoginUser({
      userName: '未登录'
    })
    message.success('退出登录成功')
    await router.push('/login')
  } else {
    message.error('退出登录失败，' + res.message)
  }
}

onMounted(async () => {
  await loginUserStore.fetchLoginUser()
  getChildrenMenus(staticRoutes)
  // 获取当前路由路径
  current.value = [router.currentRoute.value.path]
})
</script>

<template>
  <div class="head-page">
    <div class="system" @click="goHome">
      <img src="@/assets/images/system/logo.png" alt="LOGO">
      <p>
        {{ systemName }}
      </p>
    </div>
    <div class="menu">
      <a-menu v-model:selectedKeys="current" mode="horizontal" :items="menus"
              :style="{ height: headHeight + 'px' }" @click="menuItemClick" />
    </div>
    <div class="person">
      <div v-if="loginUserStore.loginUser.id">
        <a-dropdown>
          <ASpace>
            <a-avatar :src="loginUserStore.loginUser.userAvatar" />
            {{ loginUserStore.loginUser.userName ?? '无名' }}
          </ASpace>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="doLogout">
                <LogoutOutlined />
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>

      <div v-else>
        <a-button type="primary" @click="loginClick">登录</a-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.head-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.system {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;

  img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
  }
}
</style>
